<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import tabbar from '@/components/tabbar.vue'
import navbar from '@/components/navbar.vue'

// defineProps<{ msg: string }>()

const active = ref(0)
const activeNames = ref([1])
const tabs = ref([
  { name: '价位', value: 0 },
  { name: '订单', value: 1 },
  { name: '成交', value: 2 }
])
const pxList = ref([
  { name: '交易品种', value: 0 },
  { name: '成交', value: 1 },
  { name: '类型', value: 2 },
  { name: '交易量', value: 3 },
  { name: '时间', value: 4 },
  { name: '获利', value: 5 }
])

const hbList = ref([
  { name: '全部交易品种', value: 0 },
  { name: 'BTC', value: 1 },
  { name: 'ETH', value: 2 },
  { name: 'USDT', value: 3 },
  { name: 'CBNDSK', value: 4 },
  { name: 'EDVCDS', value: 5 },
  { name: 'BTC', value: 6 },
  { name: 'EDVCDS', value: 7 },
  { name: 'EDVCDS', value: 8 },
  { name: 'EDVCDS', value: 9 },
  { name: 'EDVCDS', value: 10 }
])

const showPopover = ref(false)
const showPopover1 = ref(false)
const showPopover2 = ref(false)
const searchName = ref('')

// const password = ref('')
// ruoter
const router = useRouter()

const handleSelect = (type, val) => {
  if (type == 1) {
    showPopover.value = false
    searchName.value = val.name
  } else if (type == 2) {
    showPopover1.value = false
  } else if (type == 3) {
    showPopover2.value = false
  }
}

onMounted(() => {
  // showDialog({
})
</script>

<template>
  <navbar title="历史">
    <template #right>
      <div style="display: flex">
        <van-popover v-model:show="showPopover" placement="bottom-end">
          <div class="px-list">
            <div class="box" v-for="(item, index) in hbList" :key="index" @click="handleSelect(1,item)">{{ item.name }}</div>
          </div>
          <template #reference>
            <span class="iconfont icon-jinqianfuhao" style="color: #fff; font-size: 22px"></span>
          </template>
        </van-popover>
        <van-popover v-model:show="showPopover1" placement="bottom-end">
          <div class="px-list">
            <div class="box" v-for="(item, index) in pxList" :key="index" @click="handleSelect(2,item)">{{ item.name }}</div>
          </div>
          <template #reference>
            <!-- <van-icon name="sort" style="color: #fff; font-size: 22px; margin-left: 10px" /> -->
            <span class="iconfont icon-paixu" style="color: #fff; font-size: 22px; margin-left: 10px"></span>
          </template>
        </van-popover>
        <van-popover v-model:show="showPopover2" @select="onSelect" placement="bottom-end">
          <div class="item-wrap">
            <div class="each" @click="handleSelect(3)">
              <div class="row">
                <span class="iconfont icon-jinri"></span>
                <span
                  >今天 <br />
                  2024/06/22</span
                ><span class="header-icon header-icon8" style="display: none"></span>
              </div>
            </div>
            <div class="each">
              <div class="row">
                <span class="iconfont icon-shangzhou"></span>
                <span
                  >上一周 <br />
                  2024/06/22-2024/06/15</span
                ><span class="header-icon header-icon8" style="display: none"></span>
              </div>
            </div>
            <div class="each">
              <div class="row">
                <span class="iconfont icon-shangyue"></span
                ><span
                  >上个月 <br />
                  2024/06/22-2024/05/22</span
                ><span class="header-icon header-icon8" style="display: none"></span>
              </div>
            </div>
            <div class="each">
              <div class="row">
                <span class="iconfont icon-sangeyue"></span>
                <span
                  >最近3个月 <br />
                  2024/06/22-2024/03/22</span
                ><span class="header-icon header-icon8" style="display: none"></span>
              </div>
            </div>
            <div class="each">
              <div class="row">
                <span class="iconfont icon-zidingyiriqi"></span><span>自定义周期 <br /> </span><span class="header-icon header-icon8" style=""></span>
              </div>
            </div>
          </div>
          <template #reference>
            <span class="iconfont icon-zhouqiguanli" style="color: #fff; font-size: 22px; margin-left: 10px"></span>
          </template>
        </van-popover>
      </div>
    </template>
  </navbar>
  <van-notice-bar color="#fff" background="#dd3628a3" > <van-icon name="search" /> {{ searchName }} </van-notice-bar>
  <van-tabs v-model:active="active" swipeable background="#DC584D" color="#fff" title-active-color="#fff" title-inactive-color="#fff">
    <van-tab v-for="item in tabs" :title="item.name" :key="item.value">
      <div class="info">
        <div class="info-box">
          <div class="title">结余</div>
          <div class="num">200000.00</div>
        </div>
        <div class="info-box">
          <div class="title">净值</div>
          <div class="num">200000.00</div>
        </div>
        <div class="info-box">
          <div class="title">预付款</div>
          <div class="num">200000.00</div>
        </div>
        <div class="info-box">
          <div class="title">可用预付款</div>
          <div class="num">200000.00</div>
        </div>
        <div class="info-box">
          <div class="title">预付款比例（%）</div>
          <div class="num">200000.00</div>
        </div>
      </div>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div class="bot-box">
              <div class="box-l">
                <span>AUDJPY,<i>buy 1.00</i></span>
                <p>97.55 -> 97.999</p>
              </div>
              <div class="box-r">-8.8</div>
            </div>
          </template>
          <div class="list-content">
            <div class="time">2024-01-10 12:04:43</div>
            <div class="list-num">
              <div class="list-num-each"><span>止损:</span><span>1.20</span></div>
              <div class="list-num-each"><span>库存费：</span><span>32.11</span></div>
              <div class="list-num-each"><span>获利:</span><span>32.11</span></div>
              <div class="list-num-each"><span></span><span>#1233</span></div>
            </div>
          </div>
        </van-collapse-item>
        <van-collapse-item name="2">
          <template #title>
            <div class="bot-box">
              <div class="box-l">
                <span>AUDJPY,<i>buy 1.00</i></span>
                <p>97.55 -> 97.999</p>
              </div>
              <div class="box-r">-8.8</div>
            </div>
          </template>
          <div class="list-content">
            <div class="time">2024-01-10 12:04:43</div>
            <div class="list-num">
              <div class="list-num-each"><span>止损:</span><span>1.20</span></div>
              <div class="list-num-each"><span>库存费：</span><span>32.11</span></div>
              <div class="list-num-each"><span>获利:</span><span>32.11</span></div>
              <div class="list-num-each"><span></span><span>#1233</span></div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </van-tab>
  </van-tabs>
  <tabbar />
</template>

<style scoped lang="scss">
.read-the-docs {
  width: 300px;
  text-align: center;
}
.page {
  padding: 10px;
}
.info {
  padding: 10px;
}
.info-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  // z-index: 9;

  &::after {
    position: absolute;
    content: '';
    // border-bottom: 1px dashed #ccc;
    top: 50%;
    left: 0;
    right: 0;
  }
  .title {
    position: relative;
    overflow: hidden;
    font-size: 14px;
    width: 100%;
    color: #333;
  }
  .title::after {
    content: '';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed #ccc;
    position: absolute;
    top: 50%;
  }
  .title::after {
    margin-left: 10px;
  }
  .num {
    font-size: 15px;
    color: #1d74c8;
    padding-left: 10px;
  }
}

.list-content .time {
  color: #c0c0c4;
}
.list-content .list-num {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.list-content .list-num .list-num-each {
  display: flex;
  justify-content: space-between;
  flex-shrink: 1;
  width: calc(50% - 10px);
}

.list-content .list-num .list-num-each > span:first-child {
  margin-right: 10px;
}

.bot-box {
  display: flex;
  justify-content: space-between;
  // padding: 10px;
  // align-items: center;
  position: relative;
  // &::after {
  //   content: '';
  //   border-bottom: 1px solid #f7f7f7;
  //   left: 0;
  //   right: 0;
  //   bottom: 0;
  //   position: absolute;
  // }
  .box-l {
    width: 50%;
    font-size: 15px;
    font-weight: bold;
    p {
      color: #999;
      font-weight: bold;
    }
    i {
      font-style: normal;
      font-size: 14px;
      color: #157df8;
      font-weight: 100;
    }
    // background:#ccc;
  }
  .box-r {
    color: red;
    font-size: 18px;
  }
}

.item-wrap {
  .each {
    padding: 10px 10px 0 10px;
  }
  .row {
    display: flex;
    align-items: center;
    font-size: 13px;
  }
  .iconfont {
    font-size: 30px;
    margin-right: 5px;
  }
}
.px-list {
  display: flex;
  flex-direction: column;
  padding: 0 20px 10px 20px;
  .box {
    display: flex;
    margin-top: 10px;
  }
}
</style>
